<template>
  <div id="pageBody">
    <div class="equipmentPageBoxHeader">
      <div class="equipmentPageFilter">
        <el-dialog
          title="选择数据"
          :visible.sync="drawer"
          width="30%"
        >
          <h2>选择时间</h2>
          <el-date-picker
            v-model="listQuery.date"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
          <h2>选择设备</h2>
          <span class="equipmentPageFilterSelect">
            <el-select v-model="listQuery.equipmentNumber" placeholder="设备编号">
              <el-option v-for="item in equipmentNumberOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="getEquipmentName">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="equipmentPageBoxBody">
      <div class="equipmentPageTable">
        <div id="filterHeader">
          <h2 id="filterHeaderText">当前设备：</h2>
          <h2 id="filterHeaderButton" @click="getEquipmentName">{{ equipmentName }}</h2>
        </div>
        <!--        <button id="equipmentPageButton" style="cursor: pointer" @click="drawer = true">选择设备</button>-->
        <el-tabs id="tableTabs" v-model="activeName">
          <el-tab-pane v-show="activeName === 'EquipmentLineChart'" label="图表显示" name="EquipmentLineChart">
            <equipment-line-chart :date="listQuery.date" :equipment-number="listQuery.equipmentNumber" />
          </el-tab-pane>
          <el-tab-pane label="表格显示" name="EquipmentTable">
            <equipment-table :date="listQuery.date" :equipment-number="listQuery.equipmentNumber" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="equipmentPageCard">
        <equipment-card :equipment-number="listQuery.equipmentNumber" />
      </div>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import { fetchEquipmentNumberOptions } from '@/api/dataManagement'
import EquipmentTable from '@/views/equipment/components/equipmentTable'
import EquipmentCard from '@/views/equipment/components/equipmentCard'
import EquipmentLineChart from '@/views/equipment/components/equipmentLineChart'
export default {
  name: 'Page2',
  components: { EquipmentLineChart, EquipmentCard, EquipmentTable },
  directives: { waves },
  data() {
    return {
      // 日期选择器
      activeName: 'EquipmentLineChart',
      pickerOptions: {
        disabledDate: time => {
          let isSelected = false
          if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            isSelected = time.getTime() <= minTime || time.getTime() > maxTime
          }
          return isSelected || time.getTime() > Date.now() - 8.64e6
        },
        shortcuts: [{
          text: '最近1小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近3小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近12小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 12)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近24小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      listQuery: {
        equipmentNumber: 'bd16265284510910002',
        date: null
      },
      equipmentNumberOptions: '',
      drawer: false,
      equipmentName: '京九铁路-测试桩'
    }
  },
  created() {
    this.getEquipmentNumberOptions()
    document.documentElement.style.overflow = 'hidden'
    this.getDate()
  },
  beforeDestroy() {
    document.documentElement.style.overflow = ''
  },
  methods: {
    getEquipmentNumberOptions() {
      fetchEquipmentNumberOptions().then(response => {
        this.equipmentNumberOptions = response.data.equipmentNumberOptions
        setTimeout(() => {

        }, 1.5 * 1000)
      })
    },
    getEquipmentName() {
      this.drawer = !this.drawer
      if (this.equipmentNumberOptions.length !== 0) {
        for (const equipment of this.equipmentNumberOptions) {
          if (equipment.value === this.listQuery.equipmentNumber) {
            this.equipmentName = equipment.label
          }
        }
      }
    },
    getDate() {
      const start = new Date()
      const end = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 10)
      this.listQuery.date = [start, end]
    }
  }
}
</script>

<style scoped>
.equipmentPageBoxHeader{
  padding: 10px;
  display: flex;
  justify-content: center;
}
.equipmentPageFilter{
  display: flex;
  justify-content: center;
}
.equipmentPageBoxBody {
  display: flex;
  padding: 0 20px;
}
.equipmentPageTable {
  flex: 3;
  /*padding: 5px;*/
  width: 100%;
}
.equipmentPageCard {
  flex: 1;
  padding: 5px;
}
.equipmentPageFilterSelect {
  padding: 10px;
}
#tableTabs {
  background-color: #1b275e;
}
#pageBody {
  /*height: 100%;*/
  background-color: #1b275e;
  padding-bottom: 9.2em;
}
#filterHeader {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 7px;
  left: 31%;
}
#filterHeaderText {
  color: white;
}
#filterHeaderButton {
  background-color: #1b275e;
  border-color: #1b275e;
  color: white;
  cursor: pointer;
  z-index: 99;
  text-decoration: underline;
}
</style>
